<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="../css/public.css"/>
    <link rel="stylesheet" href="../css/style.css"/>

    <link rel="stylesheet" href="../layui/layui/css/layui.css"  media="all">
</head>
<body>
<div id="first"></div>
<!--主体内容-->
<section class="publicMian ">
    <div id="left"></div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面</span>
        </div>
        <div class="search">
            <span>用户名：</span>
            <input type="text" id="userName" placeholder="请输入用户名"/>
            <span>角色：</span>
            <select id="userRole" name="userRole">
                <option value="0">
                    全部
                </option>
                <option value="1">
                    超级管理员
                </option>
                <option value="2">
                    管理员
                </option>
                <option value="3">
                    普通用户
                </option>
            </select>
            <input type="button" id="search" value="查询"/>
            <a href="userAdd.html">添加用户</a>
        </div>
        <!--用户-->
        <table class="providerTable" cellpadding="0" cellspacing="0">
            <tr class="firstTr">
                <th width="10%">用户编码</th>
                <th width="20%">用户名称</th>
                <th width="10%">性别</th>
                <th width="10%">年龄</th>
                <th width="10%">电话</th>
                <th width="10%">用户类型</th>
                <th width="30%">操作</th>
            </tr>

        </table>
        <div id="demo7"></div>
    </div>

</section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeUse">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该用户吗？</p>
            <a href="#" id="yes">确定</a>
            <a href="#" id="no">取消</a>
        </div>
    </div>
</div>

<div id="last"></div>

<script src="../js/jquery.js"></script>
<script src="../js/js.js"></script>
<!--<script src="../js/time.js"></script>-->
<script src="../js/common.js"></script>
<script src="../layui/layui/layui.js"></script>
<script src="../js/showuser.js"></script>
</body>
</html>
<script>
    var flag = true;
    var layer;
    $(function(){
        $("#first").load("../common/header.html");
        $("#last").load("../common/footer.html");
        $("#left").load("../common/left.html");

        var userCode = sessionStorage.getItem("loginuser");
        console.log(userCode);
        $(".code").html(userCode);

        ajaxlistdata(null,1,null);

        $("#search").click(function () {
            //alert("df");
            var userName = $("#userName").val();
            var userRole = $("#userRole").val();
            console.log(userName);
            console.log(userRole);
            flag = true;
            ajaxlistdata(userName,1,userRole);
        });
    });
    function ajaxlistdata(userName,pageNo,userRole) {
        ajaxtemplate("/smbms/user/list",
            {"pageNo":pageNo,"userName":userName,"userRole":userRole},
            "get",
            "json",
            function (data) {
                //console.log(data.data);
                //渲染分页数据
                var list = data.data;
                $(".firstTr").siblings().remove();         //每次先清除上次的数据再添加新数据

                for(var i=0; i<list.length;i++){
                    var tr = "<tr>\n" +
                        "                    <td>"+list[i].userCode+"</td>\n" +
                        "                    <td>"+list[i].userName+"</td>\n" +
                        "                    <td>"+list[i].gender+"</td>\n" +
                        "                    <td>"+list[i].age+"</td>\n" +
                        "                    <td>"+list[i].phone+"</td>\n" +
                        "                    <td>"+list[i].birthday+"-12</td>\n" +
                        "                    <td>\n" +
                        "                        <a href=\"userView.html\"><img src=\"../img/read.png\" alt=\"查看\" title=\"查看\"/></a>\n" +
                        "                        <a href=\"userUpdate.html\"><img src=\"../img/xiugai.png\" alt=\"修改\" title=\"修改\"/></a>\n" +
                        "                        <a class='removeUser' name='"+list[i].id+"'><img src=\"../img/schu.png\" alt=\"删除\" title=\"删除\"/></a>\n" +
                        "                    </td>\n" +
                        "                </tr>"
                    //console.log(tr);
                    $(".providerTable").append(tr);  //追加到table后面
                }
                //删除功能
                $(".removeUser").click(function () {
                    var id = $(this).attr("name");
                    //alert(id);
                    $(".zhezhao").show();
                    $("#removeUse").show();
                    $("#yes").click(function () {
                        ajaxtemplate("/smbms/user/del",{"id":id},"get","json",function (data) {
                            if(data.success){
                                //layer.msg(data.msg);
                                location.href="userList.html";

                            }else{
                                layer.msg(data.msg);
                                $(".zhezhao").hide();
                                $("#removeUse").hide();

                            }
                        })
                    })
                })

                //渲染分页条
                if(flag == true){                      //只渲染一次分页条
                    laypagerender(data.totalcount);
                    flag = false;
                }
            }
        )
    }
    //分页条
    var laypage = layui.laypage;
    function laypagerender(count) {
        layui.use(['layer','laypage'], function(){


            layer = layui.layer;
            //layer.msg('Hello World');

            laypage.render({
                elem: 'demo7'
                ,count:count
                ,layout: ['count', 'prev', 'page', 'next','limit' ,'refresh', 'skip']
                ,limit:5
                ,limits:[5,10,15,20]
                ,jump: function(obj,first){                    //切换分页的回调函数，obj封装回调数据
                    // console.log(obj.curr);
                    // console.log(obj.limit);

                    //首次不执行
                    if(!first){
                        //console.log("no first");
                        var pageNo = obj.curr;
                        var userName = $("#userName").val();
                        var userRole = $("#userRole").val();
                        ajaxlistdata(userName,pageNo,userRole);
                    }else{
                        console.log("first");
                    }
                }
            });
        });
    }


</script>